<template>
  <div style="width:100%; padding-right: 10px;">
    <div v-if="currentPageData">
      <div style="position: relative;">
        <div style="font-size: 20px;font-weight: 700;">{{ currentPageData.title }}</div>
        <div style="height: 28px;position:absolute; top: 0px; right: 0px;">
          <el-button type="danger" plain v-if="isManager" @click="removeAll" :disabled="!mixEditable">删除帖子</el-button>
        </div>
      </div>
      <div style="display: flex;margin: 5px 0px 20px;">
        <el-tag effect="plain" style="height: 25px;padding: 3px 17px;margin-right: 10px; border-radius: 4px;">我要说事</el-tag>
        <span style="flex: 1;">发布时间：{{ currentPageData.createTime }}</span>
        <span>
          <i class="el-icon-view mr-5"></i>{{ currentPageData.browseNum }}
          <i class="el-icon-chat-dot-round ml-10 mr-5"></i>{{ currentPageData.commentNum }}
        </span>
      </div>
      <div style="margin: 0 30px;">
        <div v-html="currentPageData.content"></div>
        <div style="height: 28px;">
          <el-button type="text" @click="publishComment" style="float: right;font-size: 14px;font-weight: 700;" :disabled="!mixEditable">{{ currentAction }}</el-button>
        </div>
      </div>
      <!-- 评论 -->
      <div class="commentList">
        <div v-for="(comment, index) in currentPageData.commentList" :key="index">
          <el-divider></el-divider>
          <div>发布时间：{{ comment.createTime }}</div>
          <div style="margin: 0 30px;">
            <pre style="max-height:400px;overflow: auto;">{{ comment.comment }}</pre>
            <div v-if="isManager">
              <el-button type="danger" plain @click="removeRow(comment)" :disabled="!mixEditable">删除回复</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 回复 -->
      <div v-if="isCommenting" class="mt-5">
        <el-input ref="isCommentInput" type="textarea" v-model="currentComment" placeholder="Enter换行，Ctrl+Enter发送" @keydown.enter.native="keyDown"></el-input>
      </div>
    </div>
    <div v-else style="text-align: center;">
      请绑定符合格式的数据，可以参考
      <el-button type="text" @click="openDoc">文档</el-button>
    </div>
    <el-pagination
      @size-change="changePageSizer"
      @current-change="changePage"
      :current-page.sync="query.offset"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="query.limit"
      layout="total, prev, pager, next, sizes, jumper"
      :total="currentPageData && currentPageData.total || 0"
      style="float: right;">
    </el-pagination>
  </div>
</template>
<script>
import routerContextPath from '../../mixins/router-context-path.js'
export default {
  name: 'post',
  mixins: [routerContextPath],
  props: {
    value: '',
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    isManager: {
      type: Boolean,
      default: false
    },
    // 
    postObj: {
      type: Object,
      dafault: () => { return {
        title: '帖子标题帖子标题帖子标题帖子标题',
        createTime: '2023-12-12 12:00',
        browseNum: '789',
        commentNum: '1314',
        content: '正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容。',
        commentList: [
          {createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容'},
          {createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容'},
          {createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容'},
          {createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容'},
          {createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容'},
          {createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容'},
          {createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容'},
          {createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容'},
          {createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容'},
          {createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容'},
        ],
        total: 99
      }}
    }
  },
  computed: {
    isDesigner(){
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    // 可选
    selectable() {
      return this.isSelected === 'true' || this.isSelected === true
    },
    currentPageData() {
      if (this.isDesigner) {
        return this.demolist
      } else {
        return this.postObj
      }
    },
    currentAction() {
      return this.isCommenting ? '收起回复' : '回复'
    }
  },
  data() {
    return {
      demolist: {
        title: '帖子标题帖子标题帖子标题帖子标题',
        createTime: '2023-12-12 12:00',
        browseNum: '789',
        commentNum: '1314',
        content: '正文内容正文内容正文内容正文内容正文内容。',
        commentList: [{createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容'},{
          createTime: '2023-12-12 12:00', comment: '回复内容回复内容回复内容回复内容回复内容回复内容'}
        ],
        total: 99
      },
      query: {
        limit: 10,
        offset: 1
      },
      isCommenting: false,
      currentComment: ''
    }
  },
  created(){
  },
  watch: {
    
  },
  methods: {
    keyDown(e) {
      if(e.ctrlKey && e.keyCode==13) {   //用户点击了ctrl+enter触发
        console.log('ctrl+ enter')
        this.$emit('replySuccess', this.currentComment)
        this.isCommenting = false
        this.currentComment = ''
      }
    },
    publishComment() {
      this.isCommenting = !this.isCommenting
      if (this.isCommenting) {
        // focus输入框
        this.$nextTick(() => {
          this.$refs.isCommentInput.focus()
        })
      } else {
        this.isCommenting = false
        this.currentComment = ''
      }
    },
    removeAll() {
      // this.$confirm('是否确认删除该帖子?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
        this.$emit('removeSuccess', {
          type: 'all'
        })
      // }).catch(() => {
      // })
    },
    removeRow(row) {
      this.$confirm('是否确认删除该评论?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('removeSuccess', {
          type: 'row',
          data: row
        })
      }).catch(() => {
      })
    },
  //  分页
    changePageSizer(pageSize) {
      this.query.limit = pageSize
      this.$emit('changePages',this.query)
    },
    changePage(index) {
      this.query = {
        ...this.query,
        offset: index || 1
      }
      this.$emit('changePages',this.query)
    },
    openDoc() {
      window.open(`${this.contextPath}/index.html#/components_store/preview?groupCode=tang&code=post`)
    }
  }
}
</script>
<style lang="scss" scoped>
  
</style>